<template>
  <div class="app-car-container">
    <CustomContent>
      <template v-slot:body>
        <div>
          <el-form ref="form" :model="form" label-width="140px" :rules="rules">
            <template>
              <el-row :gutter="10">
                <el-col :span="6">
                  <mmv-title title="基本信息"></mmv-title>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="模板名称:" required prop="contractTemplateName">
                    <el-input v-model="form.contractTemplateName" placeholder="请输入模板名称" maxlength="30"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :push="2">
                  <el-form-item label="业务类型:" required prop="businessTypeList">
                    <el-checkbox-group v-model="form.businessTypeList">
                      <el-checkbox label="1">租车合同</el-checkbox>
                      <el-checkbox label="2">续租合同</el-checkbox>
                    </el-checkbox-group>

                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="所属企业:" required prop="enterpriseCertificationId">
                    <el-select style="width: 100%" v-model="form.enterpriseCertificationId" placeholder="请选择所属企业">
                      <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="备注:" prop="remark">
                    <el-input type="textarea" placeholder="请输入备注" v-model="form.remark"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </template>
            <template>
             <div>
               <mmv-title title="模板文件"></mmv-title>
             </div>

              <div style="margin-left: 30px;display: flex">
                <el-button type="success" style="height: 40px" @click="handleCustomTag">选取字段名</el-button>
                <el-popover
                  placement="right"
                  width="auto"
                  trigger="click" style="margin:0 20px">
                   <div style="color: red">
                     <p>1.此编辑框可自行设置合同模板;</p>
                     <p>2.合同会以最近一次启用的模板为正式的合同模板;</p>
<!--                     <p>3.若全部停用则以系统默认的模板为正式合同模板;</p>-->
                     <p>3.通过设定字段名可添加公司，客户，合同，车辆的信息，在车辆管理的合同打印中，会将这些字段转换成对应的具体信息;</p>
                   </div>
                  <el-button slot="reference" type="warning" style="height: 40px">帮助</el-button>
                </el-popover>

                <upload-file  button-title="导入模板" :is-show-tip="false" @uploadSuccess="uploadSuccess"></upload-file>
              </div>

              <div style="margin:30px">
                  <editor v-model="form.body" :min-height="400"/>
              </div>

            </template>

          </el-form>
        </div>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="primary" :loading="loading" @click.native="saveAdd">确认</el-button>
          <el-button type="info" plain @click.native="close">取消</el-button>
        </div>
      </template>

    </CustomContent>

    <custom-tag ref="customtag" :tag-list="templateItemList"></custom-tag>

  </div>
</template>

<script>
import CustomContent from '@/components/custom/content.vue'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import uploadFile from "@/components/FileUpload/index.vue";
import customTag from "./component/customTag.vue";

import {addTemplate, getEnterprises, getTemplate, updateTemplate, contractTemplateItem} from "@/api/contract/template";

export default {
  components: {MmvTitle, CustomContent,uploadFile, customTag},
  props: {},
  data() {
    // 这里存放数据
    return {
      viewType: 0,//页面类型 0:新增 1:编辑
      loading: false,
      htmlContent: '',
      templateItemList:[],
      companyList: [],
      form: {
        contractTemplateName: '',
        businessTypeList: [],
        enterpriseCertificationId: '',
        remark: '',
        body:'',
        status:2
      },
      rules: {
        contractTemplateName: [
          {required: true, message: '请输入模板名称', trigger: 'blur'}
        ],
        businessTypeList: [
          {required: true, message: '请选择业务类型', trigger: 'change'}
        ],
        enterpriseCertificationId: [
          {required: true, message: '请选择所属企业', trigger: 'blur'}
        ]
      }
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 方法集合
  methods: {
    //保存合同
    saveAdd() {
      this.$refs.form.validate((valid) => {
        if (valid) {

          if (this.form.body == ''){
            this.$message({
              type: 'error',
              message: '模板文件不能为空'
            });
            return
          }

          this.$alert('确定保存合同模板吗?', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              if (action == 'confirm') {
                if (this.viewType == 1) {
                  updateTemplate(this.form).then(res => {
                    this.$message({
                      type: 'success',
                      message: '编辑成功'
                    });
                    this.close();
                  })
                } else {
                  addTemplate(this.form).then(res => {
                    this.$message({
                      type: 'success',
                      message: '新增成功'
                    });
                    this.close();
                  })
                }

              }
            }
          });
        }
      })
    },
    // 编辑获取模板详情
    getDetail() {
      getTemplate(this.$route.query.id).then(res => {
        this.form = res.data;
      })
    },
    //返回
    close() {
      this.$router.back();
    },
    // 获取所属公司
    getCompanyList() {
      getEnterprises().then(res => {
        this.companyList = res.data;
      })
    },
    uploadSuccess(res){
      this.form.body = res.data;
    },
    handleCustomTag(){
      this.$refs.customtag.show();
    },
    getContractTemplateItem(){
      contractTemplateItem().then(res=>{
        this.templateItemList = res.data;
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
    this.viewType = this.$route.query.type;
    if (this.viewType == 1) {//编辑
      this.getDetail();
    }
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
    this.getCompanyList();
    this.getContractTemplateItem();
  },

}
</script>

<style lang="scss" scoped>
</style>
